<template>
  <div>
    <h1>订单管理</h1>
    
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="never">
      <!-- :model 是v-bind:model的简写，这是vue中动态属性绑定的语法 -->
      <!-- searchForm是绑定的数据对象，这就建立了表单和数据的双向连接 -->
      <el-form :model="searchForm" :rules="searchRules" ref="searchFormRef" label-width="100px" :inline="true">
        
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单编号" style="width: 200px;" />
        </el-form-item>     

        <el-form-item label="用户编号" prop="userId">
          <el-input v-model="searchForm.userId" placeholder="请输入用户编号" style="width: 200px;" />
        </el-form-item>
        
        <el-form-item label="用户手机号" prop="userPhone">
          <el-input v-model="searchForm.userPhone" placeholder="请输入手机号" style="width: 200px;" />
        </el-form-item>
        
        <el-form-item label="订单子状态">
          <el-select v-model="searchForm.subStatus" placeholder="请选择子状态" style="width: 150px;">
            <el-option 
              v-for="option in orderStatusOptions" 
              :key="option.value" 
              :label="option.label" 
              :value="option.value" 
            />
          </el-select>
        </el-form-item>

        <el-form-item label="产品">
          <el-select v-model="searchForm.product" placeholder="请选择产品" style="width: 150px;">
            <el-option 
              v-for="option in productOptions" 
              :key="option.value" 
              :label="option.label" 
              :value="option.value" 
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="放款时间" prop="loanTimeRange">
          <el-date-picker
            v-model="searchForm.loanTimeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 350px;"
          />
        </el-form-item>
        
        <el-form-item label="创建时间" prop="createTimeRange">
          <el-date-picker
            v-model="searchForm.createTimeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 350px;"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 订单表格 -->
    <el-table :data="orders" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="orderNo" label="订单编号" width="180" />
      <el-table-column prop="createTime" label="生成时间" width="160" />
      <el-table-column prop="mainStatus" label="主状态" width="100">
        <template #default="scope">
          <el-tag :type="getMainStatusType(scope.row.mainStatus)">
            {{ scope.row.mainStatusName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="subStatus" label="子状态" width="100">
        <template #default="scope">
          <el-tag type="info" size="small">
            {{ scope.row.subStatusName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="product" label="产品" width="120" />
      <el-table-column prop="channel" label="渠道" width="100" />
      <el-table-column prop="userId" label="用户ID" width="100" />
      <el-table-column prop="userName" label="用户姓名" width="100" />
      <el-table-column prop="userPhone" label="用户手机号" width="130" />
      <el-table-column prop="userIdCard" label="用户身份证号" width="180">
        <template #default="scope">
          <!-- 身份证号脱敏显示 -->
          {{ maskIdCard(scope.row.userIdCard) }}
        </template>
      </el-table-column>
      <el-table-column prop="applyAmount" label="申请金额" width="120">
        <template #default="scope">
          <span style="color: #f56c6c; font-weight: bold;">
            ¥{{ scope.row.applyAmount.toLocaleString() }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="applyTerm" label="申请期限" width="100">
        <template #default="scope">
          {{ scope.row.applyTerm }}个月
        </template>
      </el-table-column>
      <el-table-column prop="disbursementTime" label="放款时间" width="160" />
      <el-table-column prop="funder" label="资方" width="120" />
      <el-table-column label="操作" width="180" fixed="right">
        <!-- 在el-table-column组件提供的默认插槽中插入几个button -->
        <template #default="scope">
          <el-button type="primary" size="small" @click="viewDetail(scope.row)">
            查看详情
          </el-button>
          <el-button 
            type="danger" 
            size="small" 
            @click="cancelOrder(scope.row)"
            :disabled="!canCancel(scope.row.mainStatus)"
          >
            取消订单
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px; text-align: right;"
    />
    
    <!-- 取消订单确认对话框 -->
    <!-- cancelDialogVisible 是双向绑定标识符，在子组件中用props.modelValue来接收，并在子组件中通过@update:modelValue事件来触发变更 -->
    <!-- 当子组件触发confirm事件的时候执行 handleCancelConfirm 取消订单 -->
    <DialogConfirm 
      v-model="cancelDialogVisible"
      :message="cancelDialogMessage"
      @confirm="handleCancelConfirm"
      @cancel="handleCancelCancel"
    />
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, defineProps, computed } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/../api/api.js'
import request from '@/../api/request.js'
import DialogConfirm from '@/component/DialogConfirm.vue'

// 接收父组件传递的配置数据
const props = defineProps({
  configs: {
    type: Object,
    default: () => ({})
  }
})

// 计算属性：处理订单状态选项
const orderStatusOptions = computed(() => {
  const statusList = props.configs.orderStatus || {}
  console.log('订单状态配置:', statusList)
  
  // 将对象转换为选项数组，包含"全部"选项
  const options = [{ label: '全部', value: '' }]
  
  // 遍历 statusList 对象，key 是状态值，value 是状态名
  Object.entries(statusList).forEach(([key, value]) => {
    options.push({
      label: value,  // 状态名，如"申请中"
      value: key     // 状态值，如"100"
    })
  })
  
  return options
})

// 计算属性：处理产品选项
const productOptions = computed(() => {
  const productList = props.configs.product || {}
  console.log('产品配置:', productList)
  
  // 将对象转换为选项数组，包含"全部"选项
  const options = [{ label: '全部', value: '' }]
  
  // 遍历 productList 对象，key 是产品值，value 是产品名
  Object.entries(productList).forEach(([key, value]) => {
    options.push({
      label: value,  // 产品名，如"极速贷"
      value: key     // 产品值，如"quick_loan"
    })
  })
  
  return options
})

// 监听配置数据变化
watch(() => props.configs, (newConfigs) => {
  console.log('OrderPage 接收到配置数据:', newConfigs)
  // 这里可以根据配置数据更新页面显示
}, { immediate: true, deep: true })

// 表单引用
const searchFormRef = ref()

// 搜索表单
const searchForm = reactive({
  orderNo: '',
  createTimeRange: [],
  userId: '',
  userPhone: '',
  mainStatus: '',
  subStatus: '',
  loanTimeRange: [],
  product: ''
})

// 取消订单对话框相关
const cancelDialogVisible = ref(false)
const cancelDialogMessage = ref('')
const currentCancelRow = ref(null)

// 自定义验证函数
const validateOrderNo = (rule, value, callback) => {
  if (value === '') {
    callback() // 订单编号可以为空
  } else if (value.length < 10) {
    callback(new Error('订单编号长度不能少于10位'))
  } else if (value.length > 20) {
    callback(new Error('订单编号长度不能超过20位'))
  } else {
    callback()
  }
}

const validateUserId = (rule, value, callback) => {
  if (value === '') {
    callback() // 用户编号可以为空
  } else if (!/^\d+$/.test(value)) {
    callback(new Error('用户编号必须是数字'))
  } else {
    callback()
  }
}

const validateUserPhone = (rule, value, callback) => {
  if (value === '') {
    callback() // 手机号可以为空
  } else if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error('请输入正确的11位手机号'))
  } else {
    callback()
  }
}

const validateTimeRange = (rule, value, callback) => {
  if (!value || value.length !== 2) {
    callback() // 时间范围可以为空
  } else {
    const [startTime, endTime] = value
    if (new Date(startTime) >= new Date(endTime)) {
      callback(new Error('开始时间必须小于结束时间'))
    } else {
      callback()
    }
  }
}

// 搜索表单验证规则
const searchRules = {
  orderNo: [{ validator: validateOrderNo, trigger: 'blur' }],
  userId: [{ validator: validateUserId, trigger: 'blur' }],
  userPhone: [{ validator: validateUserPhone, trigger: 'blur' }],
  createTimeRange: [{ validator: validateTimeRange, trigger: 'change' }],
  loanTimeRange: [{ validator: validateTimeRange, trigger: 'change' }]
}

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 模拟订单数据
// const testData = [
//   {
//     orderNo: 'ORD202501010001',
//     createTime: '2025-01-01 10:30:00',
//     mainStatus: 'approved',
//     subStatus: 'final_review',
//     product: '极速贷',
//     channel: 'APP',
//     userId: 'U001',
//     userName: '张三',
//     userPhone: '13812345678',
//     userIdCard: '110101199001011234',
//     applyAmount: 50000,
//     applyTerm: 12,
//     disbursementTime: '2025-01-02 14:30:00',
//     funder: '平安银行'
//   },
//   {
//     orderNo: 'ORD202501010002',
//     createTime: '2025-01-01 11:15:00',
//     mainStatus: 'reviewing',
//     subStatus: 'risk_control',
//     product: '信用贷',
//     channel: 'H5',
//     userId: 'U002',
//     userName: '李四',
//     userPhone: '13987654321',
//     userIdCard: '110101199002022345',
//     applyAmount: 30000,
//     applyTerm: 6,
//     disbursementTime: '',
//     funder: '招商银行'
//   },
//   {
//     orderNo: 'ORD202501010003',
//     createTime: '2025-01-01 14:20:00',
//     mainStatus: 'rejected',
//     subStatus: 'initial_review',
//     product: '抵押贷',
//     channel: '微信',
//     userId: 'U003',
//     userName: '王五',
//     userPhone: '13611111111',
//     userIdCard: '110101199003033456',
//     applyAmount: 100000,
//     applyTerm: 24,
//     disbursementTime: '',
//     funder: '工商银行'
//   },
//   {
//     orderNo: 'ORD202501010004',
//     createTime: '2025-01-01 16:45:00',
//     mainStatus: 'disbursed',
//     subStatus: 'funder_review',
//     product: '企业贷',
//     channel: 'APP',
//     userId: 'U004',
//     userName: '赵六',
//     userPhone: '13722222222',
//     userIdCard: '110101199004044567',
//     applyAmount: 200000,
//     applyTerm: 36,
//     disbursementTime: '2025-01-03 09:00:00',
//     funder: '建设银行'
//   },
//   {
//     orderNo: 'ORD202501010005',
//     createTime: '2025-01-01 18:30:00',
//     mainStatus: 'pending',
//     subStatus: 'initial_review',
//     product: '极速贷',
//     channel: '支付宝',
//     userId: 'U005',
//     userName: '钱七',
//     userPhone: '13833333333',
//     userIdCard: '110101199005055678',
//     applyAmount: 25000,
//     applyTerm: 3,
//     disbursementTime: '',
//     funder: '中国银行'
//   }
// ]

const orders = ref([])
pagination.total = 0

// 获取订单列表
const fetchOrderList = async (searchParams = {}) => {
  try {
    console.log('发起订单列表请求:', api.orderUrl.orderList)
    console.log('搜索参数:', searchParams)
    
    // 构建请求参数，包含搜索条件和分页信息
    const params = {
      ...searchParams,
      page: pagination.currentPage,
      pageSize: pagination.pageSize
    }
    
    // 发起GET请求
    const req = new request(api.orderUrl.orderList, params)
    const response = await req.doGet()
    
    console.log('订单列表响应:', response)
    
    if (response && response.code === 0) {
      // 请求成功，更新订单数据
      orders.value = response.data?.orders || []
      pagination.total = response.data?.total || 0
      
      ElMessage.success(`成功获取 ${orders.value.length} 条订单数据`)
    } else {
      // 请求失败
      ElMessage.error(response?.message || '获取订单列表失败')
      orders.value = []
      pagination.total = 0
    }
  } catch (error) {
    console.error('获取订单列表异常:', error)
    ElMessage.error('网络异常，请稍后重试')
    orders.value = []
    pagination.total = 0
  }
}

// 获取主状态类型（用于标签颜色）
const getMainStatusType = (status) => {
  // 由于 orderStatus 现在是对象格式，无法直接获取颜色类型
  // 使用默认颜色映射，可以根据状态值或状态名进行映射
  const statusMap = {
    // 可以根据状态值进行映射
    '100': 'warning',     // 申请中
    '200': 'primary',     // 审核中
    '300': 'success',     // 已通过
    '400': 'danger',      // 已拒绝
    '500': 'success',     // 已放款
    '600': 'info',        // 已完成
    // 也可以根据英文状态值进行映射（兜底）
    'pending': 'warning',
    'reviewing': 'primary',
    'approved': 'success',
    'rejected': 'danger',
    'disbursed': 'success',
    'completed': 'info'
  }
  return statusMap[status] || 'info'
}

// 身份证号脱敏
const maskIdCard = (idCard) => {
  if (!idCard) return ''
  return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')
}

// 判断是否可以取消订单
const canCancel = (status) => {
  // 只有"申请中"和"审核中"状态的订单可以取消
  return [100, 200, 500].includes(status)
}

// 构建搜索参数的通用函数
const buildSearchParams = () => {
  const searchParams = {}
  Object.keys(searchForm).forEach(key => {
    const value = searchForm[key]
    if (value !== '' && value !== null && value !== undefined) {
      // 数组类型且不为空
      if (Array.isArray(value) && value.length > 0) {
        searchParams[key] = value
      }
      // 非数组类型且不为空字符串
      else if (!Array.isArray(value)) {
        searchParams[key] = value
      }
    }
  })
  return searchParams
}

// 搜索处理
const handleSearch = async () => {
  try {
    // 先验证表单
    const valid = await searchFormRef.value.validate()
    if (valid) {
      console.log('表单验证通过，搜索条件:', searchForm)
      
      // 使用通用函数构建搜索参数
      const searchParams = buildSearchParams()
      
      // 重置到第一页
      pagination.currentPage = 1
      
      // 发起搜索请求
      await fetchOrderList(searchParams)
    }
  } catch (error) {
    console.log('表单验证失败:', error)
    ElMessage.error('请检查输入内容是否正确')
  }
}

// 重置搜索
const handleReset = () => {
  // 重置表单数据
  Object.keys(searchForm).forEach(key => {
    if (Array.isArray(searchForm[key])) {
      searchForm[key] = []
    } else {
      searchForm[key] = ''
    }
  })
  
  // 清除验证状态
  searchFormRef.value?.clearValidate()
  
  // 重置分页到第一页
  pagination.currentPage = 1
  
  // 重新获取数据（不带搜索条件）
  fetchOrderList()
  
  ElMessage.info('搜索条件已重置')
}

// 查看详情
const viewDetail = (row) => {
  console.log('查看详情:', row)
  ElMessage.info(`查看订单 ${row.orderNo} 的详情`)
}

// 取消订单
const cancelOrder = (row) => {
  // 设置对话框信息
  cancelDialogMessage.value = `确定要取消订单 ${row.orderNo} 吗？`
  currentCancelRow.value = row
  // 显示对话框
  cancelDialogVisible.value = true
}

// 处理取消订单确认
const handleCancelConfirm = async () => {
  if (!currentCancelRow.value) return
  
  try {
    console.log('确认取消订单:', currentCancelRow.value)
    
    // 这里应该调用实际的取消订单API
    // const response = await cancelOrderAPI(currentCancelRow.value.orderNo)
    // if (response.code === 0) {
    //   ElMessage.success('订单取消成功')
    //   // 重新获取订单列表
    //   const searchParams = buildSearchParams()
    //   await fetchOrderList(searchParams)
    // } else {
    //   ElMessage.error(response.message || '取消订单失败')
    // }
    
    // 模拟API调用成功
    ElMessage.success('订单取消成功')
    
    // 重新获取订单列表
    const searchParams = buildSearchParams()
    await fetchOrderList(searchParams)
    
  } catch (error) {
    console.error('取消订单异常:', error)
    ElMessage.error('取消订单失败，请稍后重试')
  } finally {
    // 清除当前取消的订单信息
    currentCancelRow.value = null
  }
}

// 处理取消订单取消
const handleCancelCancel = () => {
  console.log('用户取消了取消订单操作')
  currentCancelRow.value = null
  ElMessage.info('已取消操作')
}

// 分页处理
const handleSizeChange = (val) => {
  pagination.pageSize = val
  pagination.currentPage = 1 // 改变每页条数时重置到第一页
  console.log('每页条数变更:', val)
  
  // 构建当前搜索条件并重新获取数据
  const searchParams = buildSearchParams()
  fetchOrderList(searchParams)
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  console.log('当前页变更:', val)
  
  // 构建当前搜索条件并重新获取数据
  const searchParams = buildSearchParams()
  fetchOrderList(searchParams)
}

// 页面初始化
onMounted(() => {
  console.log('页面初始化，开始获取订单列表')
  fetchOrderList()
})
</script>

<style scoped>
.search-card {
  margin-bottom: 20px;
}

.el-form--inline .el-form-item {
  margin-bottom: 15px;
}
</style>